:host {
  width: 100%;
  font-size: 14px;
  height: 100%;
  overflow: auto;
  position: relative;
}

.cardTitle {
  padding-top: 9px;
  padding-left: 25px;
  margin-right: 20px;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #2f3d5d;
  line-height: 22px;
}
.cardTitileDivider {
  border-top: 1px solid #979797ff;
  margin-left: 17px;
  margin-right: 17px;
}

.module {
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 #c6ceee;
  background-color: #ffffff;
}

.mainContainer {
  height: 400px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 1%;
  margin-right: 1%;
  display: grid;
  grid-template-columns: 30% 68%;
  grid-template-areas: 
  "Remaining Log";
  grid-column-gap: 16px;
  .Remaining {
    // background-color: blue;
    .remainingNumber {
      margin-top: 5px;
      margin-left: 30px;
      font-size: 75px;
      font-weight: bolder;
    }
    .twoButton {
      text-align: center;
      
      .inButton {
        background-color: greenyellow;
        margin-right: 10px;
        height: 50px;
        width: 30%;
      }
      .outButton {
        background-color: violet;
        margin-left: 10px;
        height: 50px;
        width: 30%;
      }
    }
  }
  .Log {
    grid-area: Log;
    // background-color: green;
    .logContainerText {
      margin: 20px 20px 20px 20px;
    }
  }
}

input{
  border-radius: 4px;
  border: 1px solid #f12222;
  width: 80%;
  margin: 20px 20px 20px 20px;
}
